<template>
  <div style="width:100%">
    <el-card class="card1">
      <el-descriptions class="margin-top" title="个人信息" :column="2" border>
        <template slot="extra">
          <el-button type="primary" size="small" @click="dialogVisible=true">修改</el-button>
        </template>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-picture-outline"></i>
            头像
          </template>
          <img v-image-preview :src="avatar" alt="" style="margin-top:10px" class="PersonImg"/>
        </el-descriptions-item>
        
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            用户名
          </template>
          {{ username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-s-custom"></i>
            密码
          </template>
          {{ password }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date"></i>
            生日
          </template>
          {{ birthday }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-male"></i>
            <i class="el-icon-female"></i>
            性别
          </template>
          <el-tag size="small">{{ sex }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <div>
        <el-dialog title="修改个人信息" :visible.sync="dialogVisible" width="40%" :before-close="handleClose"  class="dialog">
            <el-form :model="form" :rules="rules" ref="form" label-width="150px">
                <div class="updateinfo">
                    <div class="body">
                        <el-form-item label="头像" prop="avatar">
                        <img style="width:150px;height:150px" :src="form.avatar" />
                        </el-form-item>
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="账号密码" prop="password">
                            <el-input v-model="form.password"></el-input>
                        </el-form-item>
                        <el-form-item label="生日" prop="birthday">
                            <el-input v-model="form.birthday"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" prop="sex">
                            <el-switch v-model="form.sex" active-color="#13ce66" inactive-color="#ff4949" 
                            active-text="男" inactive-text="女" :active-value= "1" :inactive-value= "0">
                            </el-switch>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible=false">提 交</el-button>
            </span>
        </el-dialog>
        </div>
  </div>
</template>

<script>
export default {
  name: "Info",
  data() {
    return {
      dialogVisible:false,
      avatar: require("../../common/images/05.jpg"),
      username:"用户名" ,
      birthday:"2000-01-01",
      password:"aaa123456",
      sex: "男",
      form: {
          avatar: require("../../common/images/05.jpg"),
          username: "用户名" ,
          password:"**********",
          birthday:"2000-01-01",
          sex:"",
      },
      rules: {
          username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          ],
          password: [
          { required: true, message: "账号密码不能为空", trigger: "blur" },
          ],
      },
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {

    },
  },
  handleClose(done) {
        this.$confirm('确认放弃更改吗？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
};
</script>

<style scoped>
.card1{
  border-radius: 15px;
  width:100%;
}
.PersonImg{
  padding-bottom: 20px;
  height: 150px;
  width: 150px;
}
.margin-top{
  font-size: 15px;
}
.dialog{
  color: white;
}

</style>
